<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品列表</title>
    <meta name="keywords" content="文乐文">
    <meta name="description" content="文乐文">

    <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css">
    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="static/css/common.css" type="text/css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="car">
            <img src="./static/image/car.png" alt="" srcset="">
        </div>
        <!-- 包含头部 -->
        <div class="header_box">
            <!-- container-fluid -->
            <div class="header container">
                <div class="logo_box">
                    <img src="static/picture/logo2.png">
                </div>
                <div class="nav_box">
                    <a href="index.html">
                        <div class="item">首页</div>
                      </a>
                      <a href="goods.html">
                        <div class="item">产品中心</div>
                      </a>
                      <a href="integral.html">
                        <div class="item">积分商城</div>
                      </a>
                      <a href="lease.html">
                        <div class="item">进销存ERP</div>
                      </a>
                      <a href="service.html">
                        <div class="item">服务与支持</div>
                      </a>
                      <a href="my.html">
                        <div class="item ">个人中心</div>
                    </a>
                </div>
                <div class="buy-box">
                    <a href="javascript:;" class="tit">购买</a>
                    <div class="sub" style="display: none;">
                        <div class="list">
                            <a target="_blank" href="https://mall.jd.com/index-11504190.html?from=pc">文乐文京东旗舰店</a>
                        </div>
                    </div>
                </div>
                <div class="search_box">
                    <input name="keyword" type="text" class="search_input" id="header_search_input" placeholder="搜索">
                    <button id="header_search_btn" class="search_btn"></button>
                </div>
                
            </div>
        </div>





        <div class="page_cart container">
            <div class="title">购物车/Order Cart</div>

            <div class="address_box">
                <div @click="setDefault(item)" :class="item.isDefault?'active':''" style="cursor: pointer;"
                    class="col-sm-12 item" v-for="(item,index) in addresslist.data" :key="index">
                    {{item.province}}{{item.city}}{{item.district}}{{item.detail}} {{item.realName}}{{item.phone}}
                    <button @click.stop="toEditAddress" class="btn btn-primary address_modify_btn" type="button"
                        data-address_id="11" style="margin-left:10px;">修改</button>
                    <!-- <button @click.stop="del(item)" class="btn btn-primary address_delete_btn" type="button"
                        data-address_id="11" style="margin-left: 5px;">删除</button> -->
                </div>
                <!-- <div class="col-sm-12 address_new">
                    <div class="btn_box">
                        <button id="new_address" @click="showAdd = true" class="btn btn-primary"
                            type="button">添加新地址</button>
                    </div>
                </div> -->
            </div>

            <div class="address_form" data-user_address_id="0" v-if="showAdd">
                <div class="col-sm-12 row">
                    <div class="col-sm-6 item">
                        <div class="input-group">
                            <span class="input-group-addon">姓名</span>
                            <input type="text" v-model="addAddressForm.realName" class="form-control" name="name">
                        </div>
                    </div>
                    <div class="col-sm-6 item">
                        <div class="input-group">
                            <span class="input-group-addon">电话</span>
                            <input type="text" v-model="addAddressForm.phone" class="form-control" name="phone">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 row">
                    <div class="input-group">
                        <span class="input-group-addon">省市区</span>
                        <el-cascader style="width: 100%;" v-model="addr" ref="cascaderAddr" :options="options"
                            :props="cityProps" placeholder="请选择省市区" @change="handleAddrChange"></el-cascader>
                    </div>
                </div>
                <div class="col-sm-12 row">
                    <div class="col-sm-6 item">
                        <div class="input-group">
                            <span class="input-group-addon">地址</span>
                            <input type="text" v-model="addAddressForm.detail" class="form-control" name="address">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 row">
                    <div class="btn_box">
                        <button @click="addSumitAddress" id="confirm_address_btn" class="btn btn-primary"
                            type="button">保存</button>
                        <button @click="showAdd = false" id="cancle_address_btn" class="btn btn-primary"
                            type="button">取消</button>
                    </div>
                </div>
            </div>



            <div class="plist">
                <table class="ptable table table-bordered" v-if="preOrderNo">
                    <tr>
                        <td width="32%">商品信息</td>
                        <td width="26%">商品型号</td>
                        <td width="10%">价格</td>
                        <td width="7%">数量</td>
                        <td width="10%">小计</td>
                    </tr>
                    <tr v-for="(item,index) in orderInfoData.orderInfoVo?.orderDetailList" :key="index">
                        <td class="pinfo">
                            <img class="img-responsive pimg" :src="item.image">
                            <span class="pname">{{item.productName ? item.productName : item.storeName}}</span>
                        </td>
                        <td class="sku_box" v-if="item.sku">
                            {{item.sku}} </td>
                        <td v-if="item.pointProduct == 1">{{item.price}}积分</td>
                        <td v-else>￥{{item.price}}</td>
                        <td class="buy_num">
                            {{item.payNum ? item.payNum : item.cartNum}}个
                        </td>
                        <td v-if="item.pointProduct == 1">{{(item.payNum ? item.payNum : item.cartNum) * item.price}}积分
                        </td>
                        <td v-else>￥{{(item.payNum ? item.payNum : item.cartNum) * item.price}}</td>
                    </tr>
                    <tr>
                        <td colspan="3" style="text-align: right;font-weight: bold;">总计</td>
                        <td>{{orderInfoData.orderInfoVo?.orderProNum}}个</td>
                        <td>
                            <text class='font-color'
                                v-if="orderInfoData.orderInfoVo?.pointProduct == 1">{{orderInfoData.orderInfoVo?.payFee
                                ||
                                0}}积分</text>
                            <text class='font-color' v-else>￥{{orderInfoData.orderInfoVo?.payFee || 0}}</text>
                        </td>
                    </tr>
                </table>

                <table class="ptable table table-bordered" v-else>
                    <tr>
                        <td width="32%">商品信息</td>
                        <td width="26%">商品型号</td>
                        <td width="10%">价格</td>
                        <td width="7%">数量</td>
                        <td width="10%">小计</td>
                        <td width="10%">操作</td>
                    </tr>
                    <tr v-for="(item,index) in cartGoodsList" :key="index">
                        <td class="pinfo">
                            <img class="img-responsive pimg" :src="item.image">
                            <span class="pname">{{item.productName ? item.productName : item.storeName}}</span>
                        </td>
                        <td class="sku_box">
                            <span> {{item.sku?item.sku:'无'}}</span>
                        </td>
                        <td v-if="item.pointProduct == 1">{{item.price}}积分</td>
                        <td v-else>￥{{item.price}}</td>
                        <td class="buy_num">
                            <el-input-number size="small" v-model="item.cartNum" :min="1" :max="item?.stock"
                                @change="changeGoodsnum(item)" />
                        </td>
                        <td v-if="item.pointProduct == 1">{{(item.payNum ? item.payNum : item.cartNum) * item.price}}积分
                        </td>
                        <td v-else>￥{{(item.payNum ? item.payNum : item.cartNum) * item.price}}</td>
                        <td><button @click="delCartGoods(item)" id="cancle_address_btn" class="btn btn-primary"
                                type="button">删除</button></td>
                    </tr>

                    <tr>
                        <td colspan="3" style="text-align: right;font-weight: bold;">总计</td>
                        <td></td>
                        <td>
                            <text class='font-color'>￥{{selectCountPrice || 0}}</text>
                        </td>
                    </tr>

                </table>

                <div class="otherlist" v-if="orderInfoData.orderInfoVo?.couponFee > 0">
                    <div>优惠券抵扣: -￥{{orderInfoData.orderInfoVo?.couponFee}}</div>
                </div>

                <div class="otherlist" v-if="orderInfoData.orderInfoVo?.freightFee > 0">
                    <div>运费: -￥{{orderInfoData.orderInfoVo?.freightFee}}</div>
                </div>


                <div class="otherlist" style="display: flex;align-items: center;">
                    <span style="margin-right: 10px;">是否开票</span>
                    <el-radio-group v-model="SubOrderForm.isInvoice">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                </div>

                <div class="otherlist" style="display: flex;align-items: center;">
                    <span style="margin-right: 10px;">优惠券</span></span>

                      <el-radio-group v-model="SubOrderForm.couponId">
                        <el-radio :label="item.id" v-for="(item,index) in youhuiquanlist.data" :key="index">满{{ item.minPrice }}减{{item.money}}元</el-radio>
                      </el-radio-group>
                </div>
                

                <div class="confirm_btn_box" @click="SubOrder">
                    <button class="btn btn-primary confirm_order_btn" type="button">
                        确认并下单
                    </button>
                </div>
            </div>
        </div>

        <!-- 包含公共底部文件 -->
        <div class="footer">
            <div class="footer_box container">
                <div class="contact_box col-sm-4 f-cb">
                    <div class="dtitle">服务/Service</div>
                    <div class="tel_box">
                        <p class="title">全国统一热线电话</p>
                        <p class="tel">0574-58974484</p>
                    </div>
                    <div class="mail_box">
                        <p class="title">服务邮箱</p>
                        <p class="mail">598292588@qq.com</p>
                    </div>
                </div>
                <div class="nav_list col-sm-4 f-cb">
                    <div class="dtitle">导航/Navigation</div>
                    <ul class="nav_box">
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="">商品中心</a></li>
                        <li><a href="lease.html">打印机租赁</a></li>
                        <li><a href="service.html">服务与支持</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                </div>
                <div class="search col-sm-4 f-cb">
                    <div class="dtitle">产品中心/Product center</div>
                    <div class="search_box">
                        <input class="search_input" name="keyword" placeholder="搜索">
                        <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
                        <a class="btn btn-primary jd_btn" target="_blank"
                            href="https://mall.jd.com/index-11504190.html?from=pc">京东商城</a>
                    </div>
                    <div class="wechat_box">
                        <div class="item">
                            <img src="static/picture/wechat.svg">
                        </div>
                        <div class="item">
                            <img src="static/picture/weibo.svg">
                        </div>
                    </div>
                </div>
            </div>

            <div class="site_info container">
                Copyright ©2020 宁波文乐文科技有限公司 版权所有 <a
                    href="https://beian.miit.gov.cn/#/Integrated/index">浙ICP备2020041669号-1</a>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="static/css/index.css" rel="stylesheet">
    <script src="static/js/vue.js"></script>
    <script src="static/js/index.full.js"></script>

    <script src="static/js/jquery.js"></script>
    <script src="static/js/common.js"></script>
    <script src="static/js/pca-code.js"></script>
</body>

</html>


<script>
    const {
        createApp,
        ref,
        reactive,
        onMounted,
        unref
    } = Vue
    const { ElMessage, ElMessageBox } = ElementPlus

    createApp({
        setup() {
            const token = ref(null)
            const addresslist = reactive({
                data: []
            })

            const preOrderNo = ref('')
            const addr = ref([])
            const cascaderAddr = ref()

            const SubOrderForm = reactive({
                realName: "",
                addressId: '',
                mark: "",
                phone: "",
                payType: "",
                preOrderNo: "",
                payChannel: "pc",
                shippingType: 1,
                storeId: '',
                useIntegral: true,
                isInvoice:0,
                couponId:0
            })

            const selectCountPrice = ref(0)

            const orderInfoData = ref({})
            const cartGoodsList = ref([])

            const youhuiquanlist = reactive({
                data: []
            })
            


            const options = ref(cityoption)
            const cityProps = reactive({
                value: 'name',   // 指定选项的 值 为选项对象的某个属性值
                label: 'name',   // 指定选项 标签 为选项对象的某个属性值	
                children: 'children'    //指定选项的 子选项 为选项对象的某个属性值
            })

            const addAddressForm = reactive({
                id: '',
                detail: '',
                isDefault: true,
                phone: '',
                realName: '',
                address: {
                    city: '',
                    district: '',
                    province: '',
                }
            })

            const showAdd = ref(false)

            var query = reactive({
                page: 1,
                limit: 100,
            })

            const getAddresslist = () => {
                $.ajax({
                    url: apiurl + `/api/front/address/default`,
                    data: query,
                    headers: {
                        'Authori-zation': token.value,
                    },
                    success: (res) => {
                        if(res.data){
                            addresslist.data = [res.data]
                        }
                    },
                })
            }

            const getyouhuiquanList = () => {
                $.ajax({
                    url: apiurl + `/api/front/coupons/user`,
                    data: query,
                    headers: {
                        'Authori-zation': token.value,
                    },
                    success: (res) => {
                        if(res.data){
                            youhuiquanlist.data = res.data
                        }
                    },
                })
            }
            
            
            const toEditAddress = () => {
                window.location.href = './address.html'
            }
            

            const handleAddrChange = (e) => {

                addr.value = e
                addAddressForm.address.province = e[0]
                addAddressForm.address.city = e[1]
                addAddressForm.address.district = e[2]

                console.log(addAddressForm)
            }

            const addSumitAddress = (e) => {
                if (addAddressForm.realName == '') {
                    return ElMessage.error('姓名不能为空')
                }

                if (addAddressForm.phone == '') {
                    return ElMessage.error('电话不能为空')
                }

                if (addAddressForm.address.province == '') {
                    return ElMessage.error('省市区不能为空')
                }

                if (addAddressForm.address.detail == '') {
                    return ElMessage.error('详细地址不能为空')
                }


                $.ajax({
                    url: apiurl + '/api/front/address/edit',
                    data: JSON.stringify(addAddressForm),
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authori-zation': token.value
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            ElMessage.success('添加成功')
                            showAdd.value = false
                            getAddresslist()
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })


            }

            const del = (item) => {
                console.log(item)
                ElMessageBox.confirm(
                    '是否确认删除当前该地址?',
                    '提示',
                    {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(() => {
                    let data = {
                        id: item.id
                    }
                    $.ajax({
                        url: apiurl + '/api/front/address/del',
                        data: JSON.stringify(data),
                        type: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authori-zation': token.value
                        },
                        success: (res) => {
                            if (res.code == 200) {
                                ElMessage.success('删除成功')
                                getAddresslist()
                            } else {
                                ElMessage.error(res.message)
                            }
                        },
                    })
                })
            }

            const edit = (item) => {
                addAddressForm.id = item.id
                addAddressForm.detail = item.detail
                addAddressForm.realName = item.realName
                addAddressForm.phone = item.phone
                addAddressForm.address.province = item.province
                addAddressForm.address.city = item.city
                addAddressForm.address.district = item.district

                addr.value = [item.province, item.city, item.district]
                showAdd.value = true
            }

            const setDefault = (item) => {
                let data = {
                    id: item.id
                }
                $.ajax({
                    url: apiurl + '/api/front/address/default/set',
                    data: JSON.stringify(data),
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authori-zation': token.value
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            ElMessage.success('设置成功')
                            getAddresslist()
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })
            }




            onMounted(() => {
                let query = getQueryParams(window.location.href)
                preOrderNo.value = query.preOrderNo ? query.preOrderNo : ''

                token.value = localStorage.getItem('token') ? localStorage.getItem('token') : ''
                if (!token.value) {
                    return ElMessage.error('当前账号未登录')
                }

                // 获取订单详情
                if (preOrderNo.value) {
                    getOrderInfo()
                } else {
                    getCartData()
                }
                getAddresslist()

                getyouhuiquanList()
            });

            const getOrderInfo = () => {
                $.ajax({
                    url: apiurl + `/api/front/order/load/pre/${preOrderNo.value}`,
                    headers: {
                        'Content-Type': 'application/json',
                        'Authori-zation': token.value
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            orderInfoData.value = res.data
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })

            }
            const getCartData = () => {
                let data = {
                    page: 1,
                    limit: 100,
                    isValid: true
                }
                $.ajax({
                    url: apiurl + `/api/front/cart/list`,
                    headers: {
                        'Content-Type': 'application/json',
                        'Authori-zation': token.value
                    },
                    data: data,
                    success: (res) => {
                        if (res.code == 200) {
                            cartGoodsList.value = res.data.list

                            checkSelectCountPrice()

                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })

            }

            const getQueryParams = (url) => {
                const paramArr = url.slice(url.indexOf("?") + 1).split("&");
                const params = {};
                paramArr.map((param) => {
                    const [key, val] = param.split("=");
                    params[key] = decodeURIComponent(val);
                });
                return params;
            }

            const SubOrder = () => {
                if (addresslist.data.length == 0) {
                    ElMessage.error('请添加收货地址')
                }

                if (preOrderNo.value) {
                    SubOrderForm.preOrderNo = preOrderNo.value


                    addresslist.data.forEach(item => {
                        if (item.isDefault) {
                            SubOrderForm.addressId = item.id
                            SubOrderForm.phone = item.phone
                        }
                    })


                    if (orderInfoData.value.orderInfoVo?.pointProduct == 1) {
                        SubOrderForm.payType = 'integral'
                        SubOrderForm.useIntegral = true
                    } else {
                        SubOrderForm.payType = 'offline'
                        SubOrderForm.useIntegral = false
                    }

                    $.ajax({
                        url: apiurl + '/api/front/order/create',
                        data: JSON.stringify(SubOrderForm),
                        type: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authori-zation': token.value
                        },
                        success: (res) => {
                            if (res.code == 200) {
                                const orderNo = res.data.orderNo
                                payment(orderNo)
                            } else {
                                ElMessage.error(res.message)
                            }
                        },
                    })
                } else {
                    let data = {
                        preOrderType: 'shoppingCart',
                        orderDetails: []
                    }

                    if (cartGoodsList.value.length > 0) {
                        cartGoodsList.value.forEach(item => {
                            data.orderDetails.push({
                                shoppingCartId: item.id
                            })
                        })
                    }

                    $.ajax({
                        url: apiurl + '/api/front/order/pre/order',
                        data: JSON.stringify(data),
                        type: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authori-zation': token.value
                        },
                        success: (res) => {
                            if (res.code == 200) {
                                console.log(res)
                                const preOrderNo = res.data.preOrderNo
                                payment(preOrderNo)
                            } else {
                                ElMessage.error(res.message)
                            }
                        },
                    })

                }




            }


            const payment = (orderNo) => {
                let data = {
                    orderNo,
                    payChannel: SubOrderForm.payChannel,
                    payType: SubOrderForm.payType,
                }
                $.ajax({
                    url: apiurl + '/api/front/pay/payment',
                    data: JSON.stringify(data),
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authori-zation': token.value
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            ElMessage.success('下单成功')
                            setTimeout(() => {
                                window.location.href = 'index.html'
                            }, 1500)
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })
            }


            const delCartGoods = (item) => {
                let data = {
                    ids: item.id
                }
                $.ajax({
                    url: apiurl + '/api/front/cart/delete',
                    data: data,
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authori-zation': token.value
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            ElMessage.success('删除成功')
                            getCartData()
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })
            }


            const changeGoodsnum = (e) => {
                $.ajax({
                    url: apiurl + '/api/front/cart/num',
                    data: {
                        id: e.id,
                        number: e.cartNum
                    },
                    type: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authori-zation': token.value
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            // getCartData()
                            checkSelectCountPrice()
                        } else {
                            ElMessage.error(res.message)
                        }
                    },
                })
            }

            const checkSelectCountPrice = () => {
                selectCountPrice.value = 0
                if (cartGoodsList.value.length > 0) {
                    cartGoodsList.value.forEach(item => {
                        selectCountPrice.value += item.cartNum * parseFloat(item.price)
                    })
                }
            }
            return {
                selectCountPrice,
                cartGoodsList,
                SubOrderForm,
                orderInfoData,
                preOrderNo,
                addr,
                cascaderAddr,
                options,
                cityProps,
                getQueryParams,
                showAdd,
                addAddressForm,
                token,
                addresslist,
                youhuiquanlist,
                getyouhuiquanList,
                addSumitAddress,
                handleAddrChange,
                getAddresslist,
                del,
                edit,
                setDefault,
                getOrderInfo,
                SubOrder,
                payment,
                getCartData,
                delCartGoods,
                changeGoodsnum,
                toEditAddress,
                checkSelectCountPrice
            }
        },
    }).use(ElementPlus).mount('#app')
</script>

<style>
     .el-radio{
    margin-bottom: 0!important;
  }
    .address_box .active {
        color: red;
    }

    button {
        outline: none;
    }

    .otherlist {
        margin-top: 10px;
    }
</style>